<template>
    <div class="body" v-if="JSON.stringify(indexData) != '{}'">
        <div class="jn_top">
            <!-- 轮播 -->
            <div class="j_swiper">
                <div class="swiper-container swiper1" v-if="isSwiper">
                    <div class="swiper-wrapper">
                        <div
                            class="swiper-slide"
                            v-for="(item, index) in indexData.ad_list"
                            :key="index"
                        >
                            <img :src="item.ad_code" alt="" />
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>

            <!--菜单-start-->
            <div class="floor dhbox">
                <nav class="dh">
                    <a @click="$router.push('/zixun')">
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_zixun@2x.png"
                                alt="资讯"
                            /><br />
                            <span>资讯</span>
                        </span>
                    </a>
                    <a @click="$router.push('/jobHome')">
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_jiuye@2x.png"
                                alt="就业"
                            /><br />
                            <span>就业</span>
                        </span>
                    </a>
                    <a @click="$router.push('/peixun')">
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_jiaoyu@2x.png"
                                alt="教育培训"
                            /><br />
                            <span>教育培训</span>
                        </span>
                    </a>
                    <a @click="$router.push('/legal')">
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_falv@2x.png"
                                alt="法律援助"
                            /><br />
                            <span>法律援助</span>
                        </span>
                    </a>
                    <a @click="$router.push('/shop')">
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_shangc@2x.png"
                                alt="商城"
                            /><br />
                            <span>商城</span>
                        </span>
                    </a>
                    <a @click="$router.push('/insurance')">
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_jinrong@2x.png"
                                alt="金融保险"
                            /><br />
                            <span>金融保险</span>
                        </span>
                    </a>
                    <a @click="$router.push('/localLife')">
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_bendi@2x.png"
                                alt="本地生活"
                            /><br />
                            <span>本地生活</span>
                        </span>
                    </a>
                    <a>
                        <span>
                            <img
                                src="../../assets/newimg/index/home_icon_gengduo@2x.png"
                                alt="更多分类"
                            /><br />
                            <span>更多分类</span>
                        </span>
                    </a>
                </nav>
            </div>
            <!--菜单-end-->

            <!--优质高新职位-start-->
            <div class="j_title">
                <span>优质高新职位</span>
                <a @click="$router.push('/jobHome')">更多</a>
            </div>
            <div class="j_gxzw">
                <div v-if="indexData.recommend_jobs">
                    <a
                        class="j_gx_li"
                        v-for="(item, index) in indexData.recommend_jobs"
                        :key="index"
                        @click="
                            $router.push({
                                path: '/jobFindDetail',
                                query: { id: item.id },
                            })
                        "
                    >
                        <h1>
                            <span>{{ item.jobs_name }}</span>
                            <i>{{ item.wage_cn }}</i>
                        </h1>
                        <h2>{{ item.companyname }}<i style="float: right">{{ item.refreshtime }}</i></h2>
                        <h3>
                            <span v-for="(li, i) in item.tag_cn" :key="i">{{
                                li
                            }}</span>
                        </h3>
                        <h4>
                            <span>
                                <img
                                    src="../../assets/newimg/index/home_icon_huo@2x.png"
                                    alt=""
                                />
                                <b>{{ item.contact.contact }}</b>
                            </span>
                            <i>{{ item.district_cn }}</i>
                        </h4>
                    </a>
                </div>
            </div>
            <!--优质高新职位-end-->

            <!--每日福利-start-->
            <div class="j_title">
                <span>每日福利</span>
                <a @click="$router.push('/shop')">更多</a>
            </div>
            <div class="j_gxzw">
                <dl class="j_mrfl">
                    <dd class="j_mrfl_dd">
                        <h1>借点钱</h1>

                        <h2>2000~200000元</h2>

                        <h3>0.03% / 日</h3>

                        <h2>1~36月</h2>

                        <h5>
                            <span>
                                <img
                                    src="../../assets/newimg/index/home_icon_dui@2x.png"
                                    alt=""
                                />
                                <i>手机号</i>
                            </span>
                            <span>
                                <img
                                    src="../../assets/newimg/index/home_icon_dui@2x.png"
                                    alt=""
                                />
                                <i>银行卡</i>
                            </span>
                            <span>
                                <img
                                    src="../../assets/newimg/index/home_icon_dui@2x.png"
                                    alt=""
                                />
                                <i>身份证</i>
                            </span>
                        </h5>
                    </dd>
                    <dt class="j_mrfl_dd">
                        <h1>热卡推荐</h1>

                        <h2>南京银行卡</h2>

                        <h3>首年免年费</h3>

                        <h2>1~3个工作日</h2>

                        <h5>
                            <span>
                                <img
                                    src="../../assets/newimg/index/home_icon_dui@2x.png"
                                    alt=""
                                />
                                <i>已有486人申请</i>
                            </span>
                        </h5>
                    </dt>
                </dl>
            </div>
            <!--每日福利-end-->

            <!--推荐商品-start-->
            <div class="j_title">
                <span
                    >爆款推荐<img
                        src="../../assets/newimg/index/home_icon_huo@2x.png"
                        alt=""
                /></span>
                <a @click="$router.push('/shop')">更多</a>
            </div>
            <div class="" v-if="indexData.goods.goods_list">
                <div class="f-recommend">
                    <ul>
                        <li
                            v-for="(item, index) in indexData.goods.goods_list"
                            :key="index"
                            @click="
                                $router.push({
                                    path: '/shopDetail',
                                    query: { id: item.goods_id },
                                })
                            "
                        >
                            <a>
                                <div class="j_bktj_img">
                                    <img
                                        :src="item.original_img"
                                        :alt="item.goods_name"
                                    />
                                </div>
                                <div class="fr-pdetail">
                                    <p class="frp-title">
                                        {{ item.goods_name }}
                                    </p>
                                    <span
                                        class="frp-label"
                                        v-show="item.label_id"
                                        >{{ item.label_id }}</span
                                    >
                                    <div class="frp-price">
                                        <span class="ro-sm"
                                            >￥{{ item.shop_price }}</span
                                        >
                                    </div>
                                    <div class="wo-msg">
                                        <span
                                            >{{
                                                item.comment_count
                                            }}条评价</span
                                        >
                                        <img
                                            src="../../assets/newimg/index/hone_icon_gwci@2x.png"
                                            alt=""
                                        />
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--推荐商品-end-->
            <!-- 查看更多 -->
            <div class="jz-loods get_more" @click="$router.push('/shop')">
                <span>查看更多</span>
            </div>
            <div class="zhanwei"></div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
import { axiosPost } from '../../axios';
import Swiper, { Autoplay, Pagination } from 'swiper';
Swiper.use([Autoplay, Pagination]);
import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.less';
export default {
    name: '',
    data() {
        return {
            indexData: {},
            isSwiper: false,
        };
    },
    mounted() {
        document.body.style.overflow = '';
        this.getIndexdata();
    },
    watch: {},
    methods: {
        ...mapMutations(['changeHeadData']),
        callback() {},
        initSeiper() {
            new Swiper('.swiper1', {
                pagination: {
                    el: '.swiper-pagination',
                },
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop: true,
                on: {
                    navigationShow: function () {
                        // console.log('按钮显示了');
                    },
                },
            });
        },
        // 获取首页数据
        getIndexdata(page = 1, page_size = 6) {
            axiosPost(
                'api/index/home',
                {
                    page,
                    page_size,
                    q: '',
                },
                (res) => {
                    // console.log(res);
                    this.indexData = res.data;
                    this.isSwiper = true;
                    this.$nextTick(() => {
                        this.initSeiper();
                    });
                    // 设置顶部信息
                    this.changeHeadData({
                        city: res.data.head.location.city
                            ? res.data.head.location.city
                            : '定位中',
                        messageNum: res.data.message_count,
                    });
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
@import url('../../assets/css/index.css');

body {
    background: #f9f8f8;
}

.jn_top {
    height: 3.4133rem;
    background: #ff3b3b;

    .swiper-pagination-bullet {
        width: 0.1707rem;
        height: 0.1707rem;
        display: inline-block;
        border-radius: 0.0853rem;
        background: #e1dfe0;
        opacity: 1;
    }

    .j_swiper {
        height: 6.4rem;
        width: 15.1467rem;
        margin: 0 auto;
        border-radius: 0.4267rem;
        overflow: hidden;

        .swiper-pagination-bullet-active {
            width: 0.3413rem;
            background: #ff3b3b;
        }

        .swiper-container {
            height: 100%;

            .swiper-wrapper {
                height: 100%;
            }

            .swiper-slide {
                width: 15.1467rem;
                height: 6.4rem;
                overflow: hidden;
                border-radius: 0.4267rem;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 6.4rem;
                }
            }
        }
    }

    .dhbox {
        .dh {
            width: 15.1467rem;
            height: 6.6987rem;
            background: #ffffff;
            border-radius: 0.4267rem;
            margin: 0.512rem auto 0;
        }

        .dh a {
            display: block;
            float: left;
            width: 25%;
            text-align: center;
            margin: 0.384rem 0 0.3rem;
            color: #000000;
            position: relative;
        }

        .dh a span span {
            vertical-align: sub; /*font-size:.59733rem;*/
            font-size: 0.512rem;
            position: relative;
            top: 0.3rem;
            left: 0;
            bottom: 0;
            right: 0;
            color: #999999;
        }

        .dh a span img {
            width: 2.005333333333333rem;
        }
    }
}
</style>
